require(['config'],()=>{
    require(['jquery','pAjax','header','footer'],()=>{
class Index{
    constructor(){
        this.tbody = document.querySelector('tbody')
        this.cartTable = document.querySelector('.cartTable')
        this.selectAll = document.querySelector('.selectAll')
        this.totalNum = document.querySelector('.totalNum')
        this.money = document.querySelector('.money')
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        this.init()
    }
    init(){
        this.render()
        //不穿数据一开始调用
        this.bindTtml()
        this.total()
    } 
    //渲染界面
render(){
if(!this.list.length){
    this.tbody.innerHTML = `
    <tr height="100">
         <td colspan="6">
            <h1>你的购物车为空 <a href="/index.html">添加商品</a></h1>
         </td>
    </tr>    
    `
}else{
    
    this.tbody.innerHTML = ''
    this.list.forEach(item => {
        this.tbody.innerHTML +=`
    <tr class="shangpinxx">
        <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}"${item.is_select && "checked"}/></td>
        <td>
            <img src="${item.img_small_logo}" >
            <span class="hide">${item.title}</span>
        </td>
        <td><span>${item.price}</span></td>
        <td>
            <span class="sub" data-id="${item.goods_id}">-</span>
            <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}"/>
            <span class="add" data-id="${item.goods_id}">+</span>
        </td>
        <td><span class="price">${Math.round((item.cart_number * item.price) * 100) / 100}元</span></td>
        <td><span class="del" data-id="${item.goods_id}">删除</span></td>
    </tr>
    `
    })
}
localStorage.setItem('cart',JSON.stringify(this.list))

}

bindTtml(){
this.cartTable.onclick = (e)=>{
    let target = e.target || e.srcElement
    //全选
    if(target.className == 'selectAll'){
        let type = target.checked
        this.list.forEach(item=>{
            item.is_select = type
        })
        this.render()
        this.total()
    }         
    //单选功能
    if(target.className == 'select'){
        let id = target.dataset.id - 0
        //拿到对应的数据
        let goods = this.list.find(item=>{
            return item.goods_id == id
        })
        //如果is_select的状态是fales,取反变成ture，反之亦然
        goods.is_select = !goods.is_select         
        //当所有选单选是选中的状态，让全选选中
        let res = this.list.every(item=>{return item.is_select == true})
        if(res){
            this.selectAll.checked = true
        }else{
            this.selectAll.checked = false
        }
        this.render()
        this.total()
    }
    //增加商品功能
    if(target.className =='add'){
        let id = target.dataset.id - 0
        //拿到对应的数据
        let goods = this.list.find(item=>{return item.goods_id == id})               
        if(goods.cart_number ==10){
            alert('亲，只能购买10件哦！')
            return false
        }
        goods.cart_number++
        this.render()
        this.total()
    }
    //减少商品
    if(target.className =='sub'){
        let id = target.dataset.id - 0
        //拿到对应的数据
        let goods = this.list.find(item=>{return item.goods_id == id}) 
        if(goods.cart_number ==1){
            return false
        }
        goods.cart_number--
        this.render()
        this.total()
    }
    //删除商品
    if(target.className =='del'){
        let id = target.dataset.id - 0
        //拿到对应的数据
        let index = this.list.findIndex(item=>{return item.goods_id == id})
        this.list.splice(index,1)
        
        if(!this.list.length){
            this.selectAll.checked = false
        }
        this.render()
        this.total()

    }
    //删除选中商品
    if(target.className =='dlAll'){
        let data = this.list.filter(item=>{return item.is_select ==false})
        this.list = data              
        if(!this.list.length){
            this.selectAll.checked = false
        }
        this.render()
        this.total()
    }
    if(target.className =='calc'){
        location.href = `settlement.html?price=`+this.money.innerHTML
        
    }

}
}
total(){
let num = 0
let price = 0
this.list.forEach(item=>{
    if(item.is_select ==true){
        num+=item.cart_number  
        price += item.cart_number * item.price
    }
})
this.totalNum.innerHTML = num
this.money.innerHTML = price.toFixed(2)
} 
    
}
new Index()
})
})